<template>
	<up-navbar @leftClick="leftClick" safeAreaInsetTop placeholder>
	</up-navbar>
	<div class="resume">
		<div class="header">
			<img :src="`../../static/${resume.image}`" alt="Profile Picture" class="profile-picture" />
			<div class="header-info">
				<h1>{{ resume.name }}/{{resume.seekStatus}}</h1>
				<p>电话：{{ resume.phone }}</p>
				<p>邮箱：{{ userInfo.email }}</p>
				<p>学历：{{ resume.education }}</p>
				<p>地址：{{ userInfo.address }}</p>
			</div>
		</div>
		<div class="section">
			<div class="section-title">教育背景</div>
			<div class="education" v-for="(item, index) in educationExperience" :key="index">
				<div class="education-item">
					<p>{{item.school}}</p>
					<p>{{ item.education }} {{ item.major }}</p>
					<p v-if="item.majorRank !== ''">排名 {{ item.majorRank }}</p>
					<p class="time-period">{{ item.enrollmentDate }} - {{item.graduationDate}}</p>
					<p>{{item.schoolExperience}}</p>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="section-title">工作经历</div>
			<div class="work-experience" v-for="(item, index) in workExperience" :key="index">
				<div class="work-experience-item">
					<p>{{ item.companyName }}</p>
					<p class="time-period">{{ item.joinDate }} - {{item.leaveDate}}</p>
					<p>{{item.industry}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.occupationName}}</p>
					<div class="work-experience-details">
						<p>{{ item.jobContent }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="section-title">项目经历</div>
			<div class="work-experience" v-for="(item, index) in projectExperience" :key="index">
				<div class="work-experience-item">
					<p>{{ item.projectName }}</p>
					<p class="time-period">{{ item.startTime }} - {{item.endTime}}</p>
					<p>{{item.role}}</p>
					<div class="work-experience-details">
						<p>{{ item.projectDescription }}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="section-title">个人优势</div>
			<div class="work-experience-item">
				<p>{{ resume.personalStrengths }}</p>
			</div>
		</div>
	</div>
	<up-button text="生成pdf" @click="generatePDF()"></up-button>
</template>

<script>
	import html2canvas from 'html2canvas';
	import {
		jsPDF
	} from 'jspdf';
	export default {
		onLoad() {
			let userMessage = uni.getStorageSync('userMessage');
			console.log(userMessage);
			this.resume = userMessage.resume;
			this.workExperience = userMessage.workExperience;
			this.educationExperience = userMessage.educationExperience;
			uni.removeStorageSync('userMessage');
		},
		data() {
			return {
				userInfo: {
					candidateImg: '',
					name: '',
					sex: '',
					account: '',
					age: '',
					address: '福建省-福州市-台江区-六分街-RandomPlay录像店',
					email: '123@123.com',
				},
				resume: {
					name: '铃',
					phone: '18850723379',
					graduationYear: 24,
					age: 20,
					education: '本科',
					personalStrengths: '擅长打游戏',
					professionalSkills: '',
					image: '../../static/aili.jpg',
					resumeId: '',
					seekStatus: '离校-随时就职',
				},
				educationExperience: [{
					id: '',
					resumeId: '',
					school: '福建农林大学',
					education: '本科·全日制',
					major: '电子信息工程',
					enrollmentDate: '2019.06',
					graduationDate: '2023.06',
					majorRank: '前1%',
					schoolExperience: '担任心理委员',
				}],
				workExperience: [{
					experienceId: '',
					resumeId: 1,
					companyName: '传一卓越',
					industry: '互联网/AI',
					occupationName: 'java',
					joinDate: '2024.06',
					leaveDate: '2024.10',
					jobContent: '负责管理维护研发项目',
					remarks: '',
				}],
				projectExperience: [{
					experienceId: '',
					resumeId: '',
					projectName: '人才招聘',
					role: '前端设计师',
					startTime: '2024.10',
					endTime: '2024.11',
					projectDescription: '这是一个人才招聘系统',
				}],
			};
		},
		methods: {
			async generatePDF() {
				try {
					const element = document.querySelector('.resume');
					const canvas = await html2canvas(element);

					const pdf = new jsPDF();

					const imgData = canvas.toDataURL('image/png');
					const pageHeight = pdf.internal.pageSize.height; // 获取 PDF 页面高度  
					const pageWidth = pdf.internal.pageSize.width; // 获取 PDF 页面宽度  
					const imgHeight = canvas.height * pageWidth / canvas.width; // 根据宽度计算图像高度  
					let heightLeft = imgHeight;
					let position = 0;

					// 添加第一页的图像  
					pdf.addImage(imgData, 'PNG', 0, position, pageWidth, imgHeight);
					heightLeft -= pageHeight; // 减去已添加的页面高度  

					// 循环添加图像到新的页面，直到所有内容都被添加  
					while (heightLeft >= 0) {
						position = heightLeft - imgHeight; // 计算新的 Y 轴位置  
						pdf.addPage(); // 添加新的页面  
						pdf.addImage(imgData, 'PNG', 0, position, pageWidth, imgHeight);
						heightLeft -= pageHeight; // 减去已添加的页面高度  
					}

					// 保存 PDF  
					pdf.save('your-document.pdf');
				} catch (error) {
					console.error('Error generating PDF:', error);
				}
			},
			//获取用户个人信息
			getUserMessage() {
				this.$api.getCandidateMessage({
					candidateId: 1
				}).then((res) => {
					this.userInfo = res.data;
				})
			},
			//返回
			leftClick(){
				uni.navigateTo({
					url:'/pages/personal/onlineResumeView'
				})
			}
		},
	};
</script>

<style scoped>
	/* Add your styles here */
	.resume {
		width: 90%;
		max-width: 800px;
		margin: 40px auto;
		background-color: #ffffff;
		padding: 30px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 30px;
	}

	.profile-picture {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		margin-right: 30px;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.header-info h1 {
		margin: 0;
		color: #333333;
		font-size: 2.5em;
	}

	.header-info p {
		margin: 10px 0;
		color: #666666;
	}

	.section {
		margin-bottom: 30px;
	}

	.section-title {
		font-size: 1.8em;
		font-weight: bold;
		color: #333333;
		margin-bottom: 15px;
	}

	.education-item,
	.work-experience-item {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.time-period {
		font-style: italic;
		color: #888;
		margin-top: 5px;
	}

	.work-experience-details {
		margin-left: 20px;
	}

	.work-experience-details p {
		margin: 5px 0;
		color: #333333;
	}
</style>